<template>
	<!-- eslint-disable -->
	<div class="navbar" :class="{'iPhonex': isIphonex}">
		<ul>
			<li @click="gohome(1)" class="list-item">
				<div  :class="['Insane', this.$route.path === '/home' ? 'insaneActive' : null]">
					<span></span>
					<p>疯狂折扣</p>
				</div>
			</li>
			<li @click="gohome(2)" class="list-item">
				<div :class="['aMan', this.$route.path === '/aMan' ? 'amanActive' : null]">
					<span></span>
					<p>折扣达人</p>
				</div>
			</li>
			<li @click="gohome(3)" class="list-item">
				<div :class="['myOrder', this.$route.path === '/my/orderList' ? 'orderActive' : null]">
					<span></span>
					<p>我的订单</p>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
  /* eslint-disable */
  name: "footer",
  data() {
    return {
      isActive: false,
      isIphonex: false,
      isIos: false
    };
  },
  watch: {},
  mounted() {
    if (this.$route.path === "/home") {
      this.isActive = true;
    }
    this.iphoneType();
  },
  methods: {
    iphoneType() {
      var u = navigator.userAgent;
      if (!(u.indexOf("Android") > -1 || u.indexOf("Adr") > -1)) {
        if (window.screen.height == 812) {
          this.isIphonex = true;
        }
      }
    },
    gohome(type) {
      if (type === 1) {
        this.$router.replace({ path: "/home" });
      } else if (type === 2) {
        this.$router.replace({ path: "/aMan" });
      } else if (type === 3) {
        this.$router.replace({ path: "/my/orderList" });
      }
    }
  }
};
</script>

<style scoped>
.navbar {
  width: 100%;
  background: #fff;
  /* position: fixed;
  bottom: 0; */
  border-top: solid 1px #999;
  padding: 0.2rem;
  position: relative;
  z-index: 8888;
}
.navbar.iPhonex {
  top: -0.3rem;
}
ul,
li {
  list-style: none;
  font-size: 0.33rem;
}
.navbar ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}
.navbar .list-item {
  flex-grow: 1;
}
.navbar ul li div span {
  width: 0.55rem;
  height: 0.63rem;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.05rem;
}
.Insane span {
  background: url("../../assets/img/Insane.png") 0/100% 100%;
}
.Insane p,
.aMan p,
.myOrder p {
  text-align: center;
  font-size: 0.3rem;
  color: #3a3e4a;
}
.aMan span {
  width: 0.55rem;
  background: url("../../assets/img/aMan.png") 0/100% 100%;
}
.myOrder span {
  width: 0.47rem;
  background: url("../../assets/img/myOrder.png") 0/100% 100%;
}
.insaneActive span {
  width: 0.63rem;
  background: url("../../assets/img/InsaneActive.png") 0/100% 100%;
}
.insaneActive p {
  color: #d41362;
}
.amanActive span {
  background: url("../../assets/img/amanActive.png") 0/100% 100%;
}
.amanActive p {
  color: #d41362;
}
.orderActive span {
  background: url("../../assets/img/orderActive.png") 0/100% 100%;
}
.orderActive p {
  color: #d41362;
}
</style>
